<!-- 工具栏 -->
<template>
    <div class="tools-wrap tools-left-top" :style="boxStyle">
        <div class="tools-btn">
            <el-button
                title="前进一步"
                type="info"
                circle
                :disabled="!isForwardPageHistory"
                @click="onForwardPageHistory"
            >
                <el-icon><icon-forward /></el-icon>
            </el-button>
            <div class="tools-btn-txt">前进</div>
        </div>
        <div class="tools-btn">
            <el-button
                title="后退一步"
                type="info"
                circle
                :disabled="!isBackPageHistory"
                @click="onBackPageHistory"
            >
                <el-icon><icon-back /></el-icon>
            </el-button>
            <div class="tools-btn-txt">后退</div>
        </div>
        <template v-if="showDeleteWidgetBtn">
            <div class="tools-btn">
                <el-button
                    title="删除控件"
                    type="info"
                    circle
                    @click="handleDeleteWidget(selectWidgetIds)"
                >
                    <el-icon><icon-delete /></el-icon>
                </el-button>
                <div class="tools-btn-txt">删除</div>
            </div>
        </template>
    </div>

    <div class="tools-wrap tools-right-top" :style="boxStyle">
        <template v-if="showTemplateBtn">
            <div class="tools-btn">
                <el-button
                    title="模板"
                    type="primary"
                    circle
                    @click="onOpenTemplateDrawer('single-page-template')"
                >
                    <el-icon><icon-template /></el-icon>
                </el-button>
                <div class="tools-btn-txt">模板</div>
            </div>
            <div class="tools-btn">
                <el-button
                    title="我的模板"
                    type="primary"
                    circle
                    @click="onOpenTemplateDrawer('user-template')"
                >
                    <el-icon><icon-template /></el-icon>
                </el-button>
                <div class="tools-btn-txt">我的模板</div>
            </div>
        </template>
        <template v-if="popupWindowList.length > 0">
            <div class="tools-btn">
                <el-popover
                    placement="right"
                    title="弹窗列表"
                    :width="200"
                    trigger="click"
                    popper-class="tools-widgets-popover"
                >
                    <template #reference>
                        <el-button title="弹窗" type="info" circle>
                            <el-icon><icon-widget-popup-window /></el-icon>
                        </el-button>
                    </template>
                    <el-scrollbar height="200px" class="widget-list-wrap">
                        <template v-for="(item, index) in popupWindowList" :key="index">
                            <div
                                :class="{
                                    'active': selectWidgetIds.includes(item.eles.id)
                                }"
                                class="widget-item"
                                @click="onSelectPopupWindow(item)"
                            >
                                <div class="left-wrap">
                                    {{ item.eles.customFeature.name || '弹窗' }}
                                </div>
                                <div class="right-wrap">
                                    <el-icon title="删除" @click.stop="handleDeleteWidget([item.eles.id])"><icon-delete /></el-icon>
                                </div>
                            </div>
                        </template>
                    </el-scrollbar>
                </el-popover>
                <div class="tools-btn-txt">弹窗</div>
            </div>
        </template>
        <template v-if="sidebarWindowList.length > 0">
            <div class="tools-btn">
                <el-popover
                    placement="right"
                    title="侧边栏列表"
                    :width="200"
                    trigger="click"
                    popper-class="tools-widgets-popover"
                >
                    <template #reference>
                        <el-button title="侧边栏" type="info" circle>
                            <el-icon><icon-widget-sidebar /></el-icon>
                        </el-button>
                    </template>
                    <el-scrollbar height="200px" class="widget-list-wrap">
                        <template v-for="(item, index) in sidebarWindowList" :key="index">
                            <div
                                :class="{
                                    'active': selectWidgetIds.includes(item.eles.id)
                                }"
                                class="widget-item"
                                @click="onSelectSidebar(item)"
                            >
                                <div class="left-wrap">
                                    {{ item.eles.customFeature.name || '侧边栏' }}
                                </div>
                                <div class="right-wrap">
                                    <el-icon title="删除" @click.stop="handleDeleteWidget([item.eles.id])"><icon-delete /></el-icon>
                                </div>
                            </div>
                        </template>
                    </el-scrollbar>
                </el-popover>
                <div class="tools-btn-txt">侧边栏</div>
            </div>
        </template>
    </div>

    <div class="tools-wrap tools-right-bottom" :style="boxStyle">
        <template v-if="showAddBottomNavBtn">
            <div class="tools-btn">
                <el-button
                    title="导航"
                    type="info"
                    circle
                    @click="onAddBottomNav"
                >
                    <el-icon><icon-bottom-nav /></el-icon>
                </el-button>
                <div class="tools-btn-txt">添加导航</div>
            </div>
        </template>
    </div>

    <!-- 模板抽屉 -->
    <template-drawer ref="templateDrawerRef" />
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import TemplateDrawer from '@/components/edit/template-drawer'
import useWidget from '@/libs/edit/widgetData'
import usePageHistory from '@/libs/edit/pageHistory'
import { setEditSettingPaneType } from '@/components/edit/edit-setting-pane'
export default defineComponent({
    name: 'EditMainTools',
    components: {
        TemplateDrawer
    },
    setup() {
        const editStore = useEditStore()

        const {
            widgetListFlat,
            selectWidgetIds,
            onSelectWidget,
            onDeleteWidget
        } = useWidget()

        const {
            isBackPageHistory,
            isForwardPageHistory,
            onBackPageHistory,
            onForwardPageHistory,
            onAddPageHistory
        } = usePageHistory()

        const phoneZoom = computed(() => editStore.phoneZoom)
        const templateDrawerVisible = computed(() => editStore.templateDrawerVisible)
        const boxStyle = computed(() => ({
            transform: `scale(${1 - +(phoneZoom.value - 1).toFixed(2)})`,
            display: templateDrawerVisible.value ? 'none' : ''
        }))

        const pageId = computed(() => editStore.pageId)
        const pageData = computed(() => editStore.pageData)
        const pageType = computed(() => editStore.pageType)
        const tabbarData = computed(() => editStore.tabbarData)
        const widgetList = computed(() => editStore.widgetList)
        // 弹窗控件列表
        const popupWindowList = computed(() => widgetList.value.filter(item => item.eles.type === 'popup-window'))
        // 侧边栏控件列表
        const sidebarWindowList = computed(() => widgetList.value.filter(item => item.eles.type === 'sidebar'))
        
        // 显示模板按钮
        const showTemplateBtn = computed(() => ![1, 3].includes(pageType.value))
        // 显示添加底部导航栏按钮
        const showAddBottomNavBtn = computed(
            () => tabbarData.value.list.length <= 5
                && tabbarData.value.list.every(item => item.router !== pageId.value)
                && ![1, 3].includes(pageType.value)
                && !!pageId.value
        )
        // 显示删除控件按钮
        const showDeleteWidgetBtn = computed(
            () => selectWidgetIds.value.length > 0
                && selectWidgetIds.value.every(id => !!widgetListFlat.value[id] && widgetListFlat.value[id]?.widgetData?.eles?.type !== 'custom-top-nav')
        )

        const templateDrawerRef = ref(null)
        // 打开模板抽屉
        const onOpenTemplateDrawer = type => {
            templateDrawerRef.value.show({ type })
        }

        // 选中弹窗控件
        const onSelectPopupWindow = data => {
            onSelectWidget([data.eles.id])
            widgetList.value.forEach(item => {
                item.eles.customFeature.widgetHidden = true
            })
            data.eles.customFeature.widgetHidden = false
        }

        // 选中侧边栏控件
        const onSelectSidebar = data => {
            onSelectWidget([data.eles.id])
            widgetList.value.forEach(item => {
                item.eles.customFeature.widgetHidden = true
            })
            data.eles.customFeature.widgetHidden = false
        }

        // 删除控件
        const handleDeleteWidget = ids => {
            onDeleteWidget(ids)
            onAddPageHistory()
        }

        // 添加底部导航
        const onAddBottomNav = () => {
            tabbarData.value.list.push({
                router: pageId.value,
                text: pageData.value?.customFeature?.name || '',
                iconPath: '',
                selectedIconPath: ''
            })
            setEditSettingPaneType('tabbar')
        }

        return {
            isBackPageHistory,
            isForwardPageHistory,
            onBackPageHistory,
            onForwardPageHistory,

            boxStyle,
            pageType,
            selectWidgetIds,
            popupWindowList,
            sidebarWindowList,
            showTemplateBtn,
            showAddBottomNavBtn,
            showDeleteWidgetBtn,

            templateDrawerRef,
            onOpenTemplateDrawer,

            onSelectPopupWindow,
            onSelectSidebar,
            handleDeleteWidget,
            onAddBottomNav
        }
    }
})
</script>

<style lang="less" scoped>
@import './edit-main-tools.less';
</style>

<style lang="less">
.tools-widgets-popover {
    padding: 0 !important;
    .el-popover__title {
        padding: 12px;
        margin-bottom: 0;
    }
    .widget-list-wrap {
        .widget-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            cursor: pointer;
            &:hover {
                background-color: var(--edit-fill-color-light);
            }
            &.active {
                color: var(--edit-color-primary);
                background-color: var(--edit-color-primary-light-8);
            }
            & + .widget-item {
                border-bottom: 1px solid var(--edit-border-color-lighter);
            }
            .left-wrap {
                margin-right: 10px;
            }
            .right-wrap {
                display: inline-flex;
                align-items: center;
                font-size: 16px;
                .el-icon {
                    cursor: pointer;
                    & + .el-icon {
                        margin-left: 10px;
                    }
                    &:hover {
                        color: var(--edit-color-primary);
                    }
                }
            }
        }
    }
}
</style>